import React, { useEffect, useState } from 'react';
import { View, SafeAreaView, Text } from 'react-native';

import { WingBlank } from '@ant-design/react-native';

import {
  Button, Avatar, Text as CustomText
} from '../components';
import { colors } from '../constants/theme';
import { removeToken, getInfo } from '../service/token';
import WebSocketUtil from '../utils/WebSocketUtil';


export default function Drawer({ navigation }) {
  const [userName, setUserName] = useState(0);
  useEffect(() => {
    async function fetchData() {
      const { aud } = await getInfo();
      setUserName(aud);
    }
    fetchData();
  }, []);

  const handleLogout = async () => {
    await removeToken();
    WebSocketUtil.closeWebSocket();
    WebSocketUtil.clear();
    navigation.navigate('Auth');
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <WingBlank style={{ flex: 1, justifyContent: 'space-between' }}>
        <View style={{ flexDirection: 'row' }}>
          <Avatar size={40} />
          <Text style={{ lineHeight: 40, marginLeft: 20, color: colors.gray }}>{userName}</Text>
        </View>
        <View>
          <Button
            color={colors.gray}
            onPress={handleLogout}
          >
            <CustomText center semibold white>
              注销
            </CustomText>
          </Button>
        </View>
      </WingBlank>
    </SafeAreaView>
  );
}
